<template>
   <!-- 添加面包屑 -->
   <div class = "breadcrumb">
        <el-breadcrumb :separator-icon="ArrowRight">
            <el-breadcrumb-item :to="{ path: '/admin' }">homepage</el-breadcrumb-item>
            <el-breadcrumb-item v-for="(breadcrump, index) in breadcrumbs" key="index">
                {{ breadcrump }}
            </el-breadcrumb-item>
        </el-breadcrumb>
    </div>
    <br/>
    <div class="funButton">
        <div class="flex items-center" style="padding: 10px; 0">
          <el-button type="primary" class="ml-2" @click="andData()">添加</el-button>
          <!-- <el-button type="success" class="ml-2" @click="updateData()">修改</el-button> -->
          <!-- <el-button type="danger" class="ml-2">删除</el-button> -->
        </div>
    </div>
    <div class = "content" style="padding: 10px 0;">
      <TableView v-if="isRefresh" @editRecord="editRecord" @editVitae="editVitae" ref="tableDom"></TableView>
    </div>
    <!-- 添加功能的弹窗 -->
    <AddEditView v-if="centerDialogVisible" v-model="centerDialogVisible" 
      @changeMsg="changeMsg"
      @refreshTable="refreshTable"
      :recordId = "recordId"
    ></AddEditView>
    <VitaeView v-if="vitaeDialogVisible" v-model="vitaeDialogVisible"
      :emperorRecord = "emperorRecord"
    ></VitaeView>
</template>

<script setup lang="ts">
import {ArrowRight} from '@element-plus/icons-vue'
import { defineProps, ref, toRefs } from 'vue'
import TableView from '@/views/admin/story/TableView.vue'
import AddEditView from '@/views/admin/story/AddEditView.vue'
import VitaeView from '@/views/admin/story/VitaeView.vue'
import { Emperor } from '@/type/Story'

const props = defineProps({  // 可以拿到它的值
    breadcrumbs: Array,
})
//此处必须用toRefs，否则将失去响应式
const { breadcrumbs } = toRefs(props);

const isRefresh = ref(true)
const centerDialogVisible = ref(false)
const vitaeDialogVisible = ref(false)

// 关闭添加view
const changeMsg = () => {
  centerDialogVisible.value = !centerDialogVisible.value;
}
// 刷新table
// const tableDom: any = ref(null);
const tableDom = ref<any>();
const refreshTable = () => {
  // 调用table组件中的refresh方法
  tableDom.value.refreshTableView();
}
// 编辑按钮
const recordId = ref();
const editRecord = (id: string) => {
  recordId.value = id;
  centerDialogVisible.value = true;
}
// 编辑大事记
const emperorRecord = ref();
const editVitae = (emperor: Emperor) => {
  // console.log(emperor);
  emperorRecord.value = emperor;
  vitaeDialogVisible.value = true;
}

const andData = () => {
  // console.log("添加按钮被点击");
  recordId.value = undefined;
  centerDialogVisible.value = true
}

</script>